<template>
  <div>
    <div id="line" class="w-full h-0 mt-[-20px]"></div>
    <div class="h-5"></div>
    <el-row>
      <el-button size="small" type="primary" icon="CirclePlus" @click="handle_add">新增</el-button>
      
    </el-row>
    <!--          |右侧主体内容|-->
    <!--          列属性-->
    <el-card class="mt-2">
      <el-table :data="tableData">
        <el-table-column prop="name" label="菜品名称" width="120"></el-table-column>
        <el-table-column prop="material" label="菜品原料"></el-table-column>
        <el-table-column prop="price" label="菜品价格"></el-table-column>
        <el-table-column prop="popularity" label="菜品热度"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini"  type="success" icon="el-icon-edit"  @click="handle_update(scope.row)">修改</el-button>
            <el-button size="mini"  type="danger" icon="el-icon-delete" @click="handle_delete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!--          分页组件-->
    <div class="p-2 text-center mt-5">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <!--          点击"新增"按钮时，显示嵌套表格的"弹窗"-->
    <el-dialog title="菜品信息" v-model="dialogFormVisible_01" width="30%">
      <el-form>
        <el-form-item>
          <el-select v-model="form.type" placeholder="请选择菜品类型">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜品名称"  label-width="80px">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜品原料"  label-width="80px">
          <el-input v-model="form.material" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜品价格"  label-width="80px">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogFormVisible_01 = false">取 消</el-button>
        <el-button type="primary" @click="handle_add_save">确 定</el-button>
      </template>
    </el-dialog>
    <!--          点击"修改"按钮时，显示嵌套表格的"弹窗"-->
    <el-dialog title="菜品信息" v-model="dialogFormVisible_02" width="30%">
      <el-form>
        <el-form-item>
          <el-select v-model="form.type" placeholder="请选择菜品类型" :disabled="true">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜品名称"  label-width="80px">
          <el-input v-model="form.name" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="菜品原料"  label-width="80px">
          <el-input v-model="form.material" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜品价格"  label-width="80px">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogFormVisible_02 = false">取 消</el-button>
        <el-button type="primary" @click="handle_update_save">确 定</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import * as echarts from 'echarts';

const type = 4;
const lineBox = ref(null);
const tableData = ref([]);
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(5);
const dialogFormVisible_01 = ref(false);
const dialogFormVisible_02 = ref(false);
const form = ref({});
const options = ref([
  {
    value: 0,
    label: '猪肉类'
  }, {
    value: 1,
    label: '牛肉类'
  }, {
    value: 2,
    label: '羊肉类'
  }, {
    value: 3,
    label: '蔬菜类'
  }, {
    value: 4,
    label: '水产类'
  },{
    value: 5,
    label: '豆制品'
  },{
    value: 6,
    label: '鸡蛋类'
  },{
    value: 7,
    label: '主食类'
  }
]);

const option = {
  title: {
    text: 'aquatic'
  },
  xAxis: {              //x轴数据
    type: 'category',
    data: []
  },
  yAxis: {              //y轴数据
    type: 'value'
  },
  series: [             //每有一条折线记录，就需要登记一个series记录，不止一条折线时每个series记录都需要一个name属性以区别
    {
      data: [],
      type: 'line',
      smooth: true
    }
  ]
};

const load = async () => {
  try {
    const res = await axios.get('http://localhost:8090/admin/popularity', {
      params: {
        type
      }
    });
    console.log(res.data.content);
    option.xAxis.data = res.data.content.dish;
    option.series[0].data = res.data.content.popularity;
    lineBox.value.setOption(option);
  } catch (error) {
    console.error(error);
  }
};

const load_dish = async () => {
  try {
    const res = await axios.get('http://localhost:8090/client/dish/select', {
      params: {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        type: 4,
        name: ""
      }
    });
    console.log(res.data.content);
    tableData.value = res.data.content.data;
    total.value = res.data.content.total;
  } catch (error) {
    console.error(error);
  }
};

const handleCurrentChange = (newPageNum) => {
  pageNum.value = newPageNum;
  load_dish();
};

const handleSizeChange = (newPageSize) => {
  pageSize.value = newPageSize;
  load_dish();
};

const handle_add = () => {
  console.log('点击新增按钮');
  dialogFormVisible_01.value = true;
  form.value = {};
  // 调试：确认状态已更新
  console.log('对话框状态:', dialogFormVisible_01.value);
};

const handle_add_save = async () => {
  try {
    const res = await axios.post('http://localhost:8090/admin/save', form.value);
    if (res.data.success) {
      dialogFormVisible_01.value = false;
      load();
      load_dish();
      ElMessage.success('新增成功！');
    } else {
      dialogFormVisible_01.value = false;
      ElMessage.error('新增失败！该部门编号已存在。');
    }
  } catch (error) {
    console.error(error);
  }
};

const handle_update = (row) => {
  form.value = row;
  dialogFormVisible_02.value = true;
};

const handle_update_save = async () => {
  try {
    const res = await axios.post('http://localhost:8090/admin/save', form.value);
    if (res.data.success) {
      dialogFormVisible_02.value = false;
      load_dish();
      ElMessage.success('修改成功！');
    } else {
      dialogFormVisible_02.value = false;
      ElMessage.error('修改失败！');
    }
  } catch (error) {
    console.error(error);
  }
};

const handle_delete = (row) => {
  form.value = row;
  ElMessageBox.confirm('此操作将永久删除该菜品, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    handle_delete_confirm();
    load();
    load_dish();
    ElMessage.success('删除成功！');
  }).catch(() => {
    ElMessage.info('已取消删除。');
  });
};

const handle_delete_confirm = async () => {
  try {
    await axios.post('http://localhost:8090/admin/delete', form.value);
  } catch (error) {
    console.error(error);
  }
};

onMounted(() => {
  // if(!lineBox.value){
  //   //初始化echarts容器，之后lineBox就不再为null
  //   lineBox.value = echarts.init(document.getElementById("line"))
  // }
  load();
  load_dish();
});
</script>

<style scoped>

</style>